<template>
    <!-- 充值页 -->
    <div class="login">
        <div class="login_item">
            <input type="number" placeholder="请输入手机号码" name="mobile" v-model="mobile" max="99999999999" v-focus/>
        </div>
        <div class="login_item relative">
            <input :type="type" placeholder="请输入密码" name="password" v-model="password"/>
            <img v-if="!isShowPass" @click="passStatus" src="./../../images/hide_password.png" alt="显示密码" class="show_status absolute">
            <img v-if="isShowPass" @click="passStatus" src="./../../images/display_password.png" alt="显示文本" class="show_status absolute">
        </div>
        <div class="btn_account" @click="login">登录</div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default{
        data:function(){
            return{
                mobile:'',
                password:'',
                isShowPass:false,
                type:'password'
            }
        },
        watch: {
            mobile:function(newValue,oldValue){
                if(newValue.length>11){
                    this.mobile = newValue.substring(0,11); 
                }
            }
        },
        methods:{
            login(){
                this.post({
                    url:"api/user/login",
                    data:{
                        mobile: this.mobile,
                        password: this.password
                    },
                }).then(respose=>{
                    localStorage.t = respose.auth_token;
                    localStorage.mobile = respose.mobile;
                    axios.defaults.headers.common['Authorization'] = localStorage.t;
                    //登录成功回到主页
                    this.getUserInfo(()=>{
                        this.$router.push('/account');
                    })
                })
            },
            passStatus(){
                this.isShowPass = !this.isShowPass;
                if(this.isShowPass){
                    this.type = "text";
                }else{
                    this.type="password";
                }
            }
        }
    }
</script>
<style type="text/css">
    @import url('./account.css');
</style>